<template>
	<yetou :title="title" @leftback='leftback'></yetou>
	<view class="container" :style="`padding-top:${systemBarHeight+64}px`">
		<view class="header">
			<uni-icons :type="icon" size="72" :color="color"></uni-icons>
			<text class="suc-icon">{{subtitle}}</text>

		</view>
		<view class="">
			<reservationTable :tableData="tableData"></reservationTable>
		</view>
		<view class="footer">

			<button type="primary" v-if="btnShow" @click="openPop">取消预约</button>

		</view>
	</view>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="success" cancelText="关闭" confirmText="确定" title="提示" content="确定取消此次预约吗"
			@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	<!-- #ifndef MP-WEIXIN -->
	<uni-popup ref="message" type="message" class="jishi">
		<uni-popup-message :type="msgType" :message="messageText" :duration="2000" class="neiorong">
		</uni-popup-message>
	</uni-popup>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<uni-popup ref="popup" background-color="#fff" @change="change">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<text class="text">{{messageText}}</text>
		</view>
	</uni-popup>
	<!-- #endif -->
</template>

<script>
	import storage from '@/utils/storage.js'
	import reservationTable from "@/components/bookingReg/reservationTable/reservationTable.vue"
	import yetou from '@/components/bookingReg/yeyou/yeyou.vue'
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	export default {
		components: {
			reservationTable,yetou
		},
		setup() {
			const data = reactive({
				barhig: '120rpx',
				title: '预约挂号详情',
				icon: 'checkbox',
				color: '#0066ff',
				subtitle: '预约成功',
				btnShow: true,
				msgType: '',
				messageText: '',
				systemBarHeight: null,
				tableData: {
					
				}
			})
			data.tableData=JSON.parse(storage.get('tableData'))
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log(menuButtonInfo, '胶囊top位置')
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				data.barhig = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()

			const getSysteminfo = () => {
				uni.getSystemInfo({
					success: res => {
						data.systemBarHeight = res.statusBarHeight;
						console.log(data.systemBarHeight, res)
					}
				});
			}
			getSysteminfo()
			// #endif
			const alertDialog = ref(null)
			const message = ref(null)
			const popup = ref(null)
			const openPop = () => {
				alertDialog.value.open()
			}
			const dialogConfirm = () => {
				console.log(2);
				data.msgType = 'success'
				data.btnShow = ref(false)
				data.icon = ref('navigate-filled')
				data.subtitle = ref('已取消')
				data.color = ref('#FF9933')
				data.messageText = "取消成功"
				// #ifndef MP-WEIXIN
				message.value.open()
				// #endif
				// #ifdef MP-WEIXIN
				popup.value.open('center')
				setTimeout(() => {
					popup.value.close('center')
				}, 2000)
				// #endif
				alertDialog.value.close()
			}
			const dialogClose = () => {
				console.log(1);
				alertDialog.value.close()
			}
			const leftback = () => {
				if(data.btnShow){
					uni.navigateBack({
						delta: 1
					});
				}else{
					uni.switchTab({
						url: '/pages/home/index/index'
					});
				}
			                   
						}
			return {
				...toRefs(data),
				alertDialog,
				openPop,
				dialogConfirm,
				dialogClose,
				message,
				popup,
				leftback
			}
		}
	}
</script>

<style lang="scss">


	.container {
		padding: 0 36rpx;
		box-sizing: border-box;

		.header {
			display: flex;
			flex-flow: column;
			text-align: center;
			margin-bottom: 36rpx;

			.suc-icon {
				margin: 16rpx 0;
				font-size: 36rpx;
			}
		}

		button {
			background-color: #eee;
			margin-bottom: 36rpx;
			color: #0066ff;
		}

		::v-deep button::after {
			border: none;
		}
	}

	uni-popup-message {
		width: 240rpx;
	}

	// #ifndef MP-WEIXIN
	.jishi {
		::v-deep uni-view[name="content"] {
			width: 240rpx;
			top: 240px;
			padding: 36rpx;
			text-align: center;
			left: 50% !important;
			transform: translateX(-50%) !important;
			overflow: hidden;
		}

		::v-deep .uni-popup-message__box {
			padding: 48rpx;
		}


	}

	// #endif
	// #ifdef MP-WEIXIN
	.popup-content {
		width: 280rpx;
		border-radius: 20rpx;
		height: 180rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.text {
		font-size: 32rpx;
		color: #FF9933;
		background-color: none;
	}

	// #endif
</style>
